<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cssDemo</title>
	<link rel="stylesheet" type="text/css" href="one.css"><!-- 外联 --> 
	<style>
	*{/*通配符选择器，可以选择所有*/
		margin: 0px;
		padding: 0px;
	}
	ul{/*标签元素选择器，可以选中符合这个条件的所有元素*/
		list-style:none;
	}
	li{
		color:red;
	}
	#container{/*ID选择器,优先级最高，但要保证唯一*/
		width:150px;
		height:40px;
		font-size:12px !important;
		border:1px/*边框的粗细*/solid #f00;/*盒子模型*/
		margin:10px;
		font-style: italic;
		font-weight:bolder;
		/*不兼容IE10以下及火狐3以下;params:水平偏移 垂直偏移 模糊距离 颜色*/
		text-shadow:2px 2px 2px orange;
/*不兼容IE10以下及火狐3以下;params:水平偏移 垂直偏移 模糊距离 颜色*/
		box-shadow:1px 1px 1px orange;
		border-radius: 5px;/*圆角边框*/
		position: relative;
		/*
		property ： 属性 
		duration ： 持续时间 
		timing-function ： 动画类型 
		delay 延时：
		*/
		transition:all 1s;
		animation:myframes 10s;  
	}
	#container:hover{
		/*
		params:平移 旋转 缩放
		*/
		transform: translate(200px,0) ;
		color:#234;
	}
	.ord{/*class选择器*/
		color:#ff0;
	}
	.bigFont{
		font-size:20px;
	}
	a[href$=".docx"]{
		/* text-decoration: none;清除下划线 */
		background-position: -193px -991px;
		background-repeat: no-repeat;
		background-image: url(pkg_wkcommon_base_z_6fd720e.png);
		padding-left: 30px;
	}
	a:hover{/*鼠标悬停，伪类*/
			text-decoration: none;
			color:yellow;
	}
	a:before{/*伪元素，可以用来换行，写个空就行*/
		content:'d';
	}
	@keyframes myframes{/*动画属性*/
		25%{
			color:#f00;
			/*
			params:平移 旋转 缩放
			*/
			transform: translate(700px,0px);
		}
		70%{
			color:#00f;
			transform:translate(700px,400px);
		}
		70%{
			color:black;
			transform:translate(0,100px);
		}
	}
	</style>
</head>
<body>
	<div id="container">
		<p>
		桃花坞里桃花庵，
		桃花庵前种桃树；
		</p>
	</div>
	<p id="container" class="bigFont" style="font-size:20px !important;">
		the day is a good day,
		the sky is very blue.
	</p>
	<ul>
		<li class ="ord haha">列表项</li>
		<li>列表项</li>
		<li class ="ord">列表项</li>
		<li>列表项</li>
		<a href="#"><li>列表项</li></a>
	</ul>
	<span>我爱我的祖国</span>
	<li>这是ul之外的一个li</li>
	<span>我爱我的祖国</span>
	<a href="aaa.docx">英语单词500个</a>
</body>
</html>